<!--
 * @Descripttion: 单位管理
 * @msg1: 具备增删改查功能
 * @msg2: 可对外抛出信息，发射事件为 toggleUnit()
 * @msg3: 引入组件有 UnitAdd, UnitEdit, UnitDetail 
 * @msg4: 地图选点放在mixins getAddress.js
 * @version: 
 * @Author: yuanliutech
 * @Date: 2022-12-15 15:09:17
 * @LastEditors: yuanliutech@lwj
 * @LastEditTime: 2022-12-30 11:44:14
-->
<template>
  <div class="tree-container">
    <div class="header">
      <div class="title">组织机构管理</div>
      <div class="right">
        <el-input placeholder="请输入组织机构" v-model="orgName" style="width: 200px; margin-right: 20px" size="small"
          clearable @clear="searchClick">
          <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
          </el-button>
        </el-input>
        <el-button class="el_button" icon="el-icon-plus" size="small" @click="addClick"
          v-if="user.roleName!='ORG_ADMIN'">新增组织机构</el-button>
      </div>
    </div>
    <div :class="['middle', first ? 'middle1' : '']">
      <el-tree v-if="isTree" :data="dataTree" node-key="id" :props="defaultProps" @node-click="handleNodeClick"
        ref="refTree" :expand-on-click-node="false">
        <div class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="slideIn(data)"
          @mouseleave="slideAway(data)">
          <span>{{ node.label }}</span>
          <i class="iconfont guanliyuan_guanliyuanliebiao" v-if="data.role==1 && flagtree"></i>
          <div class="tree-node_ctrls" v-show="data.showCtrls">
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom" v-if="user.roleName!='ORG_ADMIN'">
              <i @click="delClick(data)" class="el-icon-delete"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom" v-if="user.roleName!='ORG_ADMIN'">
              <i @click="editClick(data)" class="el-icon-edit-outline"></i>
            </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" content="退出机构" placement="bottom" v-if="user.roleName=='ORG_ADMIN'">
              <i @click="exit(data)" class="iconfont tuichu"></i>
            </el-tooltip> -->
            <el-tooltip class="item" effect="dark" content="详情" placement="bottom">
              <i @click="detailClick(data)" class="el-icon-document"></i>
            </el-tooltip>
            <!-- <i class="el-icon-delete" @click.stop="delClick(data)"></i>
            <i class="el-icon-edit-outline" @click.stop="editClick(data)"></i>
            <i class="el-icon-document" @click.stop="detailClick(data)"></i> -->
          </div>
        </div>
      </el-tree>
    </div>
    <div class="footer">
      <el-pagination v-show="total > 30" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="page" :page-size="limit" layout="prev, pager, next" :total="total"></el-pagination>
    </div>
    <unit-add ref="refAdd" :getLocationInfo="getLocationInfo" :getAddressflag="getAddressflag"></unit-add>
    <unit-edit ref="refEdit" :editOrgInfo="editOrgInfo" :getLocationInfo="getLocationInfo" :getAddressflag="getAddressflag"
      @clearEditOrgInfo="clearEditOrgInfo"></unit-edit>
    <org-detail ref="refDetail" :detailOrgInfo="detailOrgInfo"></org-detail>
  </div>
</template>

<script>
import { reqOrgList,  reqOrgDel, reqOrgExit } from "@api/api.js";
import { mapState } from "vuex";
import UnitAdd from "./UnitAdd.vue";
import UnitEdit from "./UnitEdit.vue";
import OrgDetail from "./OrgDetail.vue";
import mixinGetAddress from "./mixins/getAddress.js";
export default {
  components: { UnitAdd, UnitEdit, OrgDetail },
  props: ["dataList"],
  mixins: [mixinGetAddress],
  data() {
    return {
      isTree: true,
      dataTree: [],
      page: 1,
      limit: 30,
      total: 0,
      orgName: "",
      defaultProps: {
        children: "children",
        label: "orgName",
        isLeaf: "hasChildren",
        id: "id",
      },
      first: true, //第一次加载，点击后消除
      loadingSearch: false,
      firstInfo: {}, //默认第一条信息
      editOrgInfo: {}, //修改一条单位信息
      detailOrgInfo: {}, //详情
      flagtree: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 获取列表
    async getDataList() {
      let params = {
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgName: this.orgName,
         type:"4"
      };
      let res = await reqOrgList( params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataTree = res.data.rows;
      this.flagtree = false;
      this.dataTree.forEach((result) => {
        if (result.role == 1) {
          // result.orgName=result.orgName+'（管理员）'
          this.flagtree = true;
        }
      });
      this.total = res.data.total;
      this.first = true;
      if (res.data.rows.length > 0) {
        let data = {
          orgId: res.data.rows[0].id,
          orgName: res.data.rows[0].orgName,
          role: res.data.rows[0].role,
        };
        this.$emit("toggleOrgId", data);
      } else {
        // 单位筛选为空时
        let data = {
          orgId: "",
          orgName: "",
          role: 2,
        };
        this.$emit("toggleOrgId", data);
      }
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 30;
      this.getDataList();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getDataList();
    },
    // 点击新增一级单位
    addClick() {
      this.$refs.refAdd.dialogVisible = true;
      this.$refs.refAdd.closeDialog2(); //防止出现表单验证
      this.$refs.refAdd.RegionList();
    },
    // 点击一条
    handleNodeClick(data) {
      // console.log(data);
      let params = {
        orgId: data.id,
        orgName: data.orgName,
        role: data.role,
      };
      this.$emit("toggleOrgId", params);
      this.first = false;
    },
    // 查询单位
    async searchClick() {
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },
    // 滑动进去一条
    slideIn(data) {
      this.$set(data, "showCtrls", true);
    },
    slideAway(data) {
      // console.log(data);
      this.$set(data, "showCtrls", false);
    },
    // 点击编辑
    editClick(data) {
      this.$refs.refEdit.dialogVisible = true;
      this.editOrgInfo = JSON.parse(JSON.stringify(data));
      this.$refs.refEdit.RegionList();
      this.$refs.refEdit.cityArr();
      this.$refs.refEdit.areaArr();
      this.$refs.refEdit.RegionLevelList();
      this.$refs.refEdit.communitylList();
    },
    // 删除单位
    exit(data) {
      this.$confirm("此操作将退出该机构 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqOrgExit({
            orgId: data.id,
            userId: this.user.userId,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("退出机构成功!");
          this.getDataList();
        })
        .catch(() => {});
    },
    // 查看详情
    detailClick(data) {
      // console.log(data);
      this.$refs.refDetail.dialogVisible = true;
      this.detailOrgInfo = JSON.parse(JSON.stringify(data));
    },
    // 清除编辑数据
    clearEditOrgInfo() {
      this.editOrgInfo = {};
    },
    // 删除一个单位
    delClick(data) {
      this.$confirm(`此操作将永久删除单位${data.orgName}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqOrgDel(data.id);
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("删除成功");
          this.getInitDataList();
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="less">
.tree-container {
  width: 100%;
  height: 100%;

  .header {
    position: relative;
    height: 65px;
    padding: 0 30px;
    border-bottom: 1px solid @primaryBorderColor;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      width: 25%;
      font-size: 20px;
      color: @primaryThemeTxtColor;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-icon-search {
      //   color: @primaryBorderColor;
      //   font-size: 20px;
    }
    .right {
      width: 75%;
      display: flex;
      justify-content: flex-end;
      //   justify-content: space-between;
    }
  }
  .middle {
    height: calc(100% - 65px - 70px);
    overflow: hidden;
    overflow-y: scroll;

    .custom-tree-node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-left: 0.5%;
      box-sizing: border-box;

      .guanliyuan_guanliyuanliebiao {
        position: absolute;
        left: -2.5%;
        font-size: 12px;
      }

      .tree-node_ctrls {
        position: absolute;
        right: 0;
        width: 30%;
        text-align: right;
        padding-right: 10px;
        // background-color: pink;

        i {
          color: #aaa;
          font-size: 20px;
          margin-right: 10px;
          &:hover {
            color: #fff;
          }
        }
      }
    }
    ::v-deep .el-tree {
      height: 100%;
      font-size: 14px;
      background: @primaryHeaderBgcolor;
      box-sizing: border-box;
      padding: 12px 10px;
      color: @primaryThemeTxtColor;
      overflow: hidden;
      overflow-y: scroll;
    }
    ::v-deep .el-tree-node__content {
      padding: 5px 0 !important;
      &:hover {
        background: @paginationBgcolor !important;
        border-radius: 4px;
      }
    }

    ::v-deep .el-tree-node.is-current.is-focusable > .el-tree-node__content {
      background-color: #7367f0 !important;
      border-radius: 4px;
    }

    // 解决点击白底问题
    ::v-deep .el-tree-node.is-focusable > .el-tree-node__content {
      // background-color: @primaryTree;
      border-radius: 4px;
    }

    ::v-deep .is-current > .el-tree-node__content > .el-tree-node__label {
      color: #f0f0f0;
    }
  }
  .middle1 {
    // ::v-deep .el-tree .el-tree-node.is-focusable:first-child {
    //   background-color: #7367f0 !important;
    //   border-radius: 4px;
    //   .el-tree-node__content {
    //     color: #f6f6f6;
    //   }

    //   .el-tree-node__content {
    //     padding: 5px 0 !important;
    //     &:hover {
    //       background: #7367f0 !important;
    //       border-radius: 4px;
    //     }
    //   }
    // }

    // 解决点击白底问题
    ::v-deep .el-tree > .el-tree-node:first-of-type > .el-tree-node__content {
      background-color: #7367f0 !important;
      color: #f0f0f0;
    }
  }
}

// input后面的查询按钮
::v-deep .el-input-group__append {
  color: #fff;
  border: none;
  background-color: #7367f0;
}
</style>